<template>
    <div>
        <div class="navbar-div">
            <van-nav-bar title="类别列表"/>
        </div>
        <div>
            <van-row>
                <van-col span="6">
                    <div id="leftNav">
                        <ul>
                            <li @click="clickCategory(index,item.ID)" :class="{categoryActive:categoryIndex==index}" v-for="(item ,index) in category" :key="index">
                                {{item.MALL_CATEGORY_NAME}}
                            </li>
                        </ul>
                    </div>
                </van-col>
                <van-col span="18">
                    <div class="tabCategorySub">
                        <van-tabs v-model="active" @click="onClickCategorySub">
                            <van-tab v-for="(item,index) in categorySub" :key="index" :title="item.MALL_SUB_NAME">
                               
                            </van-tab>
                        </van-tabs>
                    </div>
                     <div id="list-div">
                         <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
                            <van-list 
                                v-model="loading"
                                :finished="finished"
                                @load="onLoad"
                            >
                            <div class="list-item" @click="goGoodsInfo(item.ID)" v-for="(item,index) in goodList" :key="index">
                                <div class="list-item-img"><img :src="item.IMAGE1" width="100%" :onerror="errorImg"/></div>
                                <div class="list-item-text">
                                    <div>{{item.NAME}}</div>
                                    <div>￥{{item.ORI_PRICE | moneyFilter}}</div>
                                </div>
                            </div>
                            </van-list>
                        </van-pull-refresh>
                    </div>
                </van-col>
            </van-row>
        </div>
    </div>
</template>
<script>
    import axios from 'axios'
    import url from '@/serviceAPI.config.js'
    import { Toast } from 'vant'
    import {toMoney} from '@/filter/moneyFilter.js'
    export default {
        data(){
            return {
                category:[],
                //控制导航变色
                categoryIndex:0,
                categorySub:[],
                //激活标签的值
                active:0,
                list:[],
                //上拉加载
                loading:false,
                //上拉加载是否没有了
                finished:false,
                //下拉刷新
                isRefresh:false,
                //商品列表页数
                page:1,
                //商品信息
                goodList:[],
                //商品子类的id
                categorySubId:'',
                //替补图片
                errorImg:'this.src=" '+ require('@/assets/images/errorimg.png')+'"',
            }
        },
        //声明周期
        created(){
            this.getCategory();
        },
        //生命周期
        mounted(){
            let winHeight = document.documentElement.clientHeight
            document.getElementById("leftNav").style.height= winHeight-46 +'px'
            document.getElementById("list-div").style.height = winHeight-90+'px'
        },
        methods:{ 
            //获取大类的方法
            getCategory() {
                axios({
                    url:url.getCateGoryList,
                    method:'get',
                }).then(response=>{
                    //console.log(response)
                    if(response.data.code==200 && response.data.message){
                        this.category = response.data.message
                        this.getCategorySubByCategoryId(this.category[0].ID)
                    }else{
                        Toast('亲，服务器错误，无法获取数据😭')
                    }
                }).catch(error=>{
                    console.log(error)
                })
            },
            //点击大类获取信息
             clickCategory(index,categoryId){
                //将点击的索引传递过去
                this.categoryIndex = index
                this.page = 1
                this.finished = false
                this.goodList = []
                this.getCategorySubByCategoryId(categoryId)
            },
            //根据大类ID读取小类类别列表
            getCategorySubByCategoryId(categoryId){
                axios({
                    url:url.getCategorySubList,
                    method:'post',
                    data:{categoryId:categoryId}
                }).then(response=>{
                   // console.log(response)
                    if(response.data.code==200 && response.data.message){
                        this.categorySub = response.data.message
                        this.active = 0
                        this.categorySubId = this.categorySub[0].ID
                    }else{
                        Toast('亲，服务器获取失败😭😭')
                    }
                }).catch(error=>{
                   console.log(error)
                })
            },

            //上拉加载
            onLoad(){
                setTimeout(()=>{
                    //测试数据
                    // for(let i=0;i<10;i++){
                    //     this.list.push(this.list.length+1)
                    // }
                    // this.loading=false;
                    // if(this.list.length>=40){
                    //     this.finished = true
                    // }
                    this.categorySubId = this.categorySubId?this.categorySubId:this.categorySub[0].ID
                    this.getGoodList()
                },1000)
            },
            //下拉刷新,用来重新加载数据
            //我们先把list数组清空，然后再次调用onLoad()方法，这样就会刷新商品列表页面
            onRefresh(){
                setTimeout(()=>{
                    this.isRefresh = false;
                    this.finished = false;
                    this.goodList=[];
                    this.page = 1;
                    this.onLoad()
                },500);
            },

            //商品信息获取接口，传递两个参数一个时商品的子分类id和分页页数
            getGoodList(){
                axios({
                    url:url.getGoodsListByCategorySubID,
                    method:'post',
                    data:{
                        categorySubId:this.categorySubId,
                        page:this.page
                    }
                }).then(response=>{
                   // console.log(response)
                    if(response.data.code==200 && response.data.message.length){
                        this.page++
                        this.goodList=this.goodList.concat(response.data.message)
                    }else{
                        this.finished = true;
                    }
                    this.loading = false;
                   // console.log(this.finished)
                }).catch(error=>{
                    console.log(error)
                })
            },

            //点击子类获取商品信息
            onClickCategorySub(index,title){
                this.categorySubId = this.categorySub[index].ID
                console.log(this.categorySubId)
                this.goodList = []
                this.finished = false
                this.page = 1
                this.onLoad()
            },

            //编程式导航,接收参数为id,这里使用了name的导航方式
            //跳转到商品详细页
            goGoodsInfo(id){
                this.$router.push({name:'Goods',params:{goodsId:id}})
            },
        
        },
        //价格过滤
        filters:{
            moneyFilter(money){
                return toMoney(money)
            }  
        }
    }
</script>
<style scoped>
    #leftNav ul li {
    line-height: 2rem;
    border-bottom:1px solid #E4E7ED;
    padding:3px;
    font-size:0.8rem;
    text-align: center;
}
.categoryActive{
    background-color: #fff;
}
 .list-item{
        display: flex;
        flex-direction: row;
        font-size:0.8rem;
        border-bottom: 1px solid #f0f0f0;
        background-color: #fff;
        padding:5px;
    }
    #list-div{
        overflow: scroll;
    }
    .list-item-img{
        flex:8;
    }
    .list-item-text{
        flex:16;
        margin-top:10px;
        margin-left:10px;
    }
 
 
</style>


